@import '../core/style/variables';
@import '../core/ripple/ripple';


$mat-radio-size: $mat-toggle-size !default;
$mat-radio-ripple-size: $mat-radio-size * 0.75;

// Top-level host container.
.mat-radio-button {
  display: inline-block;
}

// Inner label container, wrapping entire element.
// Enables focus by click.
.mat-radio-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;
}

// Container for radio circles and ripple.
.mat-radio-container {
  box-sizing: border-box;
  display: inline-block;
  height: $mat-radio-size;
  position: relative;
  width: $mat-radio-size;
}

// The outer circle for the radio, always present.
.mat-radio-outer-circle {
  box-sizing: border-box;
  height: $mat-radio-size;
  left: 0;
  position: absolute;
  top: 0;
  transition: border-color ease 280ms;
  width: $mat-radio-size;
  border: {
    width: 2px;
    style: solid;
    radius: 50%;
  }
}

// The inner circle for the radio, shown when checked.
.mat-radio-inner-circle {
  border-radius: 50%;
  box-sizing: border-box;
  height: $mat-radio-size;
  left: 0;
  position: absolute;
  top: 0;
  transition: transform ease 280ms, background-color ease 280ms;
  transform: scale(0);
  width: $mat-radio-size;

  .mat-radio-checked & {
    transform: scale(0.5);
  }
}

// Text label next to radio.
.mat-radio-label-content {
  display: inline-block;
  order: 0;
  line-height: inherit;
  padding-left: $mat-toggle-padding;
  padding-right: 0;

  [dir='rtl'] & {
    padding-right: $mat-toggle-padding;
    padding-left: 0;
  }
}

// Alignment.
.mat-radio-label-content.mat-radio-label-before {
  order: -1;
  padding-left: 0;
  padding-right: $mat-toggle-padding;

  [dir='rtl'] & {
    padding-right: 0;
    padding-left: $mat-toggle-padding;
  }
}

// Basic disabled state.
.mat-radio-disabled, .mat-radio-disabled .mat-radio-label {
  cursor: default;
}

.mat-radio-ripple {
  position: absolute;
  left: -$mat-radio-ripple-size;
  top: -$mat-radio-ripple-size;
  right: -$mat-radio-ripple-size;
  bottom: -$mat-radio-ripple-size;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
